<!-- src/views/Home.vue -->
<template>
  <div class="container">
    <sideBar></sideBar>
    <main class="content">
      <Top></Top>
      <div class="shop_container">
        <h1 class="creating">建设中，敬请期待</h1>
      </div>
      
        
    </main>
  </div>
</template>

<script setup>
import Top from '../components/top.vue';
import { ref, reactive } from 'vue'
import sideBar from '../components/sideBar.vue';
import { useUserStore } from '../store/user';
const { userState } = useUserStore();

// if ( !userState.token ) {
//   setTimeout(() => {
//     userState.isShowLogin = true
//   },1000)
// }


</script>

<style scoped>

.shop_container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

}

.shop_container .creating {
  font-size: 30px;
  color: #FFF;
}

.btn{
  width: 100%;
  height: 40px;
  background-color: #FFF;
}

.container {
  display: flex; 
  min-height: 100vh; 
  background: linear-gradient(180deg, rgba(30, 30, 64, 1) 0%, rgba(32, 32, 50, 1) 100%);
}

.sidebar {
  width: 200px; 
  background: linear-gradient(180deg, rgba(42, 42, 65, 1) 0%, rgba(71, 73, 83, 1) 100%);
  color: white; 
  padding: 10px;
  box-sizing: border-box;
  min-height: 100vh; /* 最小高度为视口高度，确保撑满 */
}

.content {
  flex: 1; /* 自动填充剩余空间 */
  overflow-y: auto; /* 允许垂直滚动 */
}

</style>
  